// pages/[category]/index.tsx
import React, { useMemo } from "react";
import { useRouter } from "next/router";
import Head from "next/head";
import { useProducts } from "@/business.InterfaceLayer/hooks/store/useQueryStore/useQueryStore";
import useProductData from "@/business.InterfaceLayer/hooks/useProductData";
import { Product } from "@/business.InterfaceLayer/type";
import { resources } from "@/user.InterfaceLayer/constants/const";
import useSortFilters from "@/business.InterfaceLayer/hooks/useSortFiltersQuery";
import useFilterProducts from "@/business.InterfaceLayer/hooks/useFilterProducts";
import { useTranslation } from "react-i18next";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";
import dynamic from "next/dynamic";
import siteMetadata from "@/user.InterfaceLayer/utils/siteMetaData";

const BrandsBlock = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/BrandsBlock")
);

const PromotionBlockWidget = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/PromotionBlock.widget")
);

const ViewAll = dynamic(
  () =>
    import("@/user.InterfaceLayer/Libraries/UI_KIT/Molecules/ViewAll.molecule")
);
const HitsBlockWidget = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/HitsBlock.widget")
);

const CategoryPage: React.FC = () => {
  const { t } = useTranslation();
  const router = useRouter();
  const { category } = router.query;

  const { products: allProducts, isLoading } = useProducts();
  const filteredCategory = useMemo(() => {
    if (!allProducts || !category) return [];
    return allProducts.filter(
      (product: Product) => product.category === category
    );
  }, [allProducts, category]);
  const { uniqueBrands, uniqueColors, maxPrice } =
    useProductData(filteredCategory);
  const { filters, applyFilters, clearFilters } = useSortFilters();
  const filteredProducts = useFilterProducts(filteredCategory);

  const refinements = useMemo(() => {
    if (!filteredCategory || !category) return [];
    // Получите уникальные подкатегории (refinement) для выбранной категории
    const uniqueRefinements = Array.from(
      new Set(
        filteredCategory
          .filter((product: Product) => product.category === category)
          .map((product: Product) => product.refinement)
      )
    );
    return uniqueRefinements;
  }, [filteredCategory, category]);

  const categoryInfo = resources.catalog.find(
    (item) => item.category === category
  );

  if (isLoading) {
    return <div>Loading...</div>; // Или любой другой индикатор загрузки
  }

  const getTitle = () => {
    if (category === "man")
      return `Купить мужскую одежду и обувь в интернет магазине ${siteMetadata.title}`;
    if (category === "woman")
      return `Купить женскую одежду и обувь в интернет магазине ${siteMetadata.title}`;
    if (category === "kids")
      return `Купить детскую одежду и обувь в интернет магазине ${siteMetadata.title}`;
    return siteMetadata.title;
  };

  const getDescription = () => {
    if (category === "man")
      return "В интернет магазине одежды и обуви Veetsok Вас ждут ТЫСЯЧИ моделей модной брендовой мужской обуви и одежды разных размеров! Бесплатная доставка по России.";
    if (category === "woman")
      return "В интернет магазине одежды и обуви Veetsok Вас ждут ТЫСЯЧИ моделей модной брендовой женской обуви и одежды разных размеров! Бесплатная доставка по России.";
    if (category === "kids")
      return "В интернет магазине одежды и обуви Veetsok Вас ждут ТЫСЯЧИ моделей модной брендовой детской обуви и одежды разных размеров! Бесплатная доставка по России.";
    return siteMetadata.description;
  };

  return (
    <main className={`${globalContainer}`}>
      <Head>
        <title>{getTitle()}</title>
        <meta name="description" content={getDescription()} />
      </Head>
      <div className="my-14 py-6 px-10 bg-gradient-to-r rounded-lg from-cyan-500 to-blue-500">
        <PromotionBlockWidget />
      </div>
      <div className="my-8">
        <BrandsBlock />
      </div>
      <div className="mb-16">
        <div className="flex justify-between pt-11 pb-6">
          <TextAtom
            type={TextAtomEnum.enum_h3}
            className="font-bold text-black"
          >
            {t("MainPage.HitsBlock.title")}
          </TextAtom>
          <ViewAll desciption={t("MainPage.HitsBlock.view")} />
        </div>
        <HitsBlockWidget products={filteredProducts} />
      </div>
    </main>
  );
};

export default CategoryPage;
